<!--
- File:    退货/退款列表
-->
<template>
  <div>
    <div class="Web_Box pt88">
      <div class="DistributionOrder">
        <div class="gd lt0 wauto z99">
          <div class="Tabs2">
            <ul>
              <li :class="{'on': type == $dictionary.refundType.money}" @click="switchType($dictionary.refundType.money)" style="width: 50%">退款</li>
              <li :class="{'on': type == $dictionary.refundType.goods}" @click="switchType($dictionary.refundType.goods)" style="width: 50%">退货</li>
            </ul>
          </div>
        </div>
        <div class="ProList pt10">
          <div class="SearchBox p20 bg_efeff4" v-if="false">
            <div class="SearchBor xd hidden"><i class="iconfont icon-search lh70"></i>
              <input type="text" class="SearchInp pl80 f26" placeholder="搜索您需要的订单" v-model="keyword">
              <button type="button" class="SearchBut" @click="searchOrder">搜索</button>
            </div>
          </div>
          <ul
            v-infinite-scroll="loadMoreOrder"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="0"
            infinite-scroll-immediate-check="false">
            <li v-for="order in orderList.data">
              <div class="tit"><span class="fl">单号：{{order.refund_sn}}</span>
                <span class="fr cr_595757">{{order.seller_state | refundStatusName}}</span></div>
              <div style="margin-bottom: 10px;" class="f-cb" v-for="goods in order.extend_goods_info">
                <div class="Pic">
                  <img :src="$config.imgsite + $config.goodsImgSrc + goods.store_id + '/' + goods.goods_image + '_w150'" alt="" @click="gotoRefundDetail(order.refund_id)"/>
                </div>
                <div class="Con" @click="gotoRefundDetail(order.refund_id)">
                  <div class="">
                    <h2 class="slh2">{{goods.goods_name}}</h2>
                    <!--<p class="Attributes slh mb10"></p>-->
                    <!--<p class="Attribute slh mb10"><span v-for="attr in goods.goods_spec">{{attr.name}} </span></p>-->
                  </div>
                  <div class=""><span class="Prices">￥{{goods.goods_price}}</span>
                    <span class="Num fr">×{{order.goods_num}}</span></div>
                </div>
              </div>
              <div class="Operation">
                <p class="Total tr">共{{order.extend_goods_info ? order.extend_goods_info.length : 0}}件商品  合计：￥{{order.refund_amount}}</p>
                <!--<div class="fr">-->
                  <!--<span class="but1 cr_595757 fr ml20" v-show="order.order_state == $dictionary.orderStatus.sended">查看物流 </span>-->
                <!--</div>-->
              </div>
            </li>
          </ul>
          <loading-more :allLoaded="orderList.allLoaded" :show="orderList.data.length > 0"></loading-more>
        </div>
      </div>
    </div>
    <empty-data :show="orderList.allLoaded && orderList.data.length <= 0" style="margin-top: 1rem"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import * as dictionary from '../../dictionary'
  export default{
    data() {
      return {
        type: this.$route.query.type || this.$dictionary.refundType.money,
        keyword: '', // 搜索关键字
        orderList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
    },
    filters: {
      refundStatusName: function (value) {
        let name = ''
        switch (value) {
          case dictionary.refundStatus.waiting:
            name = '等待审核'
            break
          case dictionary.refundStatus.resolve:
            name = '卖家已同意'
            break
          case dictionary.refundStatus.reject:
            name = '卖家已拒绝'
            break
        }
        return name
      }
    },
    watch: {
      $route () {
        this.type = this.$route.query.type
        this.initOrderList()
        this.getOrderList(this.type, this.orderList.page, this.orderList.pageSize)
      }
    },
    methods: {
      gotoRefundDetail(id) {
        if (this.type == this.$dictionary.refundType.money) {
          this.$router.push({name: 'refund-money-detail', params: {id: id}})
        } else {
          this.$router.push({name: 'refund-goods-detail', params: {id: id}})
        }
      },
      switchType(value) {
        this.$router.replace({name: 'refund-list', query: {type: value}})
      },
      initOrderList() {
        this.orderList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      },
      getOrderList(type, page, pageSize) {
        if (type == this.$dictionary.refundType.money) {
          this.getRefundMoneyList(page, pageSize)
        } else if (type == this.$dictionary.refundType.goods) {
          this.getRefundGoodsList(page, pageSize)
        }
      },
      getRefundMoneyList(page, pageSize) {
        this.orderList.loading = true
        this.$request.getRefundMoneyList(page, pageSize).then(data => {
          if (data.length < this.orderList.pageSize) {
            this.orderList.allLoaded = true
          }
          this.orderList.data = [...this.orderList.data, ...data]
        }).finally(() => {
          this.orderList.requested = true
          this.orderList.loading = false
        })
      },
      getRefundGoodsList(type, page, pageSize) {
        this.orderList.loading = true
        this.$request.getRefundGoodsList(type, page, pageSize).then(data => {
          if (data.length < this.orderList.pageSize) {
            this.orderList.allLoaded = true
          }
          this.orderList.data = [...this.orderList.data, ...data]
        }).finally(() => {
          this.orderList.requested = true
          this.orderList.loading = false
        })
      },
      loadMoreOrder() {
        if (this.orderList.loading || this.orderList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getOrderList(this.type, ++this.orderList.page, this.orderList.pageSize)
        }, 500)
      },
      searchOrder() {
      },
      addComment(id) {
        this.$router.push({name: 'comment-add', params: {id: id}})
      }
    }
  }
</script>

<style>

</style>